<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="../../styles/index.css">
	<style>
		.box {
			border: solid 2px #000;
		}

		.box1 {
			width: 150px;
			height: 150px;
			background-color: pink;
			float: left;
		}

		.box2 {
			width: 300px;
			height: 300px;
			background-color: skyblue;
			float: left;
		}

		/* 推荐使用：工作中可以写在公共样式文件里 */
		.clearfix::after {
			content: '';
			/* 当前伪类元素是个内联元素，要让他变成块级元素后，clear:both 才会生效 */
			display: block;
			clear: both;
		}

		.clearfix {
			/* 兼容ie，现在基本可以不考虑ie了 */
			zoom: 1;
		}
	</style>
</head>

<body>
	<div class="box clearfix">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		Lorem ipsum dolor sit amet consectetur adipisicing elit.
	</div>

	Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor quaerat laudantium laborum harum officiis debitis nam
	ipsum provident! Temporibus delectus corporis perspiciatis doloribus id dignissimos placeat soluta fugiat nisi neque.
</body>

</html>